﻿var subj;
var seq;
var func_add_opt = function () {
    subj = parseInt($(this).attr('subj'), 10);
    seq = parseInt($(this).attr('seq'), 10);
    var p = $(this).parent().parent();
    seq++;
    var _alpha = String.fromCharCode(seq + 64);
    p.append("<li id='li" + subj + "_" + seq + "'><div class='alpha'>" + _alpha + ".</div><input type='text' class='option_content' value='option' name='txt" + subj + "_" + seq +
            "'/><div class='radio_t'>T:<input type='radio' name='radio" +
            subj + "_" + seq + "' value='T'/></div><div class='radio_f'>F:<input type='radio' name='radio" +
            subj + "_" + seq + "' value='F'/></div></li>");
    $("#remove_opt" + subj + "_" + (seq - 1)).attr({ "id": "remove_opt" + subj + "_" + seq, "seq": seq }).
            appendTo($("#li" + subj + "_" + seq));
    $(this).attr({ "id": "add_opt" + subj + "_" + seq, "seq": seq }).appendTo($("#li" + subj + "_" + seq));
    $(":text").css('color', 'gray');
    $(":text").bind({ 'focus': func_focus, 'blur': func_blur });
}

var func_rm_opt = function () {
    subj = parseInt($(this).attr('subj'), 10);
    seq = parseInt($(this).attr('seq'), 10);
    if (seq > 2) {
        seq--;
        $(this).attr({ "id": "remove_opt" + subj + "_" + seq, "seq": seq }).
                    appendTo($("#li" + subj + "_" + seq));
        $("#add_opt" + subj + "_" + (seq + 1)).attr({ "id": "add_opt" + subj + "_" + seq, "seq": seq }).
                    appendTo($("#li" + subj + "_" + seq));
        $("#li" + subj + "_" + (seq + 1)).remove();
    }
}

var func_fold = function () {
    var subj_fold = $(this).attr("subj");
    if ($(this).attr('isfold') != 'yes') {
        $('#opt' + subj_fold).hide(0);
        $(this).css('background-image', 'url(../image/appbar.download.rest.png)');
        $(this).attr('isfold', 'yes');
    }
    else {
        $('#opt' + subj_fold).show(0);
        $(this).css('background-image', 'url(../image/appbar.upload.rest.png)');
        $(this).attr('isfold', 'no')
    }
}

var func_add = function () {
    var subj_num = parseInt($(this).attr("subj"), 10);
    $(this).remove();
    $("#rm_subj" + subj_num).remove();
    subj_num++;
    var i = 1;
    var str = "";
    var _alpha;
    for (i = 1; i <= 3; i++) {
        _alpha = String.fromCharCode(i + 64);
        str += ("<li id='li" + subj_num + "_" + i + "'>" + "<div class='alpha'>" + _alpha + ".</div>" +
                                    "<input type='text' class='option_content' value='option' name='txt" + subj_num + "_" + i + "'/>" +
                                    "<div class='radio_t'>" +
                                        "T:<input type='radio' name='radio" + subj_num + "_" + i + "' value='T'/>" +
                                    "</div>" +
                                    "<div class='radio_f'>" +
                                        "F:<input type='radio' name='radio" + subj_num + "_" + i + "' value='F'/>" +
                                    "</div>" +
                                "</li>");
    }
    _alpha = String.fromCharCode(i + 64);
    str += ("<li id='li" + subj_num + "_" + i + "'>" + "<div class='alpha'>" + _alpha + ".</div>" +
                            "<input type='text' class='option_content' value='option' name='txt" + subj_num + "_" + i + "'/>" +
                            "<div class='radio_t'>" +
                                "T:<input type='radio' name='radio" + subj_num + "_" + i + "' value='T'/>" +
                            "</div>" +
                            "<div class='radio_f'>" +
                                "F:<input type='radio' name='radio" + subj_num + "_" + i + "' value='F'/>" +
                            "</div>" +
                        "</li>");
    var add_opt_btn = $("<div class='add_opt' id='add_opt" + subj_num + "_" + i + "' subj='" + subj_num + "' seq='" + i + "'></div>").
                                    bind('click', func_add_opt);
    var remove_opt_btn = $("<div class='remove_opt' id='remove_opt" + subj_num + "_" + i + "' subj='" + subj_num + "' seq='" + i + "'></div>").
                                        bind('click', func_rm_opt);

    var fold_btn = $("<div class='fold' id='fold" + subj_num + "' subj='" + subj_num + "'></div>").bind('click', func_fold);
    var add_btn = $("<div class='add' subj='" + subj_num + "' id='add_subj" + subj_num + "'></div>").bind('click', func_add);
    var rm_btn = $("<div class='minus' subj='" + subj_num + "' id='rm_subj" + subj_num + "'></div>").bind('click', func_rm);
    $("#form1").append(
                "<div class='subject' id='subject" + subj_num + "'>" +
                    "<div class='subject_title' id='subject_title" + subj_num + "'></div>" +
                    "<div class='difficluty'>"+
                        "<label for=''>Difficulty:</label>"+
                        "<select name='difficulty' class='select_difficulty'>"+
                              "<option value='1'>1</option>"+
                              "<option value='2'>2</option>"+
                              "<option value='3'>3</option>"+
                              "<option value='4'>4</option>"+
                              "<option value='5'>5</option>"+
                        "</select>"+
                    "</div>"+
                    "<div class='options' id='opt" + subj_num + "'>" +
                        "<ul class='options_list'>" +
                        str +
                        "</ul>" +
                    "</div>" +
                "</div>"
                );
    fold_btn.appendTo($("#subject_title" + subj_num));
    $("#subject_title" + subj_num).append(
                        "<div class='subject_title_content'>" +
	                        "<div class='subject_num'>" + subj_num + ".</div>" +
	                        "<input type='text' class='ques_title' value='Question title' name='ques_title" + subj_num + "'/>" +
	                        "<input type='text' class='ques_suf' value='Question surface' name='ques_suf" + subj_num + "'/>" +
                        "</div>");
    add_btn.appendTo($("#subject_title" + subj_num));
    rm_btn.appendTo($("#subject_title" + subj_num));
    remove_opt_btn.appendTo($("#li" + subj_num + "_4"));
    add_opt_btn.appendTo($("#li" + subj_num + "_4"));
    $(".set_submit").remove();
    $("<input type='submit' value='Submit' class='set_submit'/>").appendTo($("#form1"));
    $(":text").css('color', 'gray');
    $(":text").bind({ 'focus': func_focus, 'blur': func_blur });
}

var func_rm = function () {
    var subj_num = parseInt($(this).attr('subj'), 10);
    if (subj_num > 1) {
        subj_num--;
        $("#add_subj" + (subj_num + 1)).attr({ 'subj': subj_num, 'id': "add_subj" + subj_num }).appendTo($("#subject_title" + subj_num));
        $(this).attr({ 'subj': subj_num, 'id': "rm_subj" + subj_num }).appendTo($("#subject_title" + subj_num));
        $("#subject" + (subj_num + 1)).remove();
    }
}

var ipt_orignal_text;
var func_focus = function () {
    var txtVal = $(this).val();
    if (txtVal == "Question title" || txtVal == "Question surface" || txtVal == "option") {
        ipt_orignal_text = $(this).val();
        $(this).val("").css('color', 'black');
    }
}
var func_blur = function () {
    if ($(this).val() == "") {
        $(this).val(ipt_orignal_text).css('color', 'gray');
    }
}
//////////////////////////////////////////////////////////////////////////
$(function () {
    $("#choose_logo").hover(function () {
        $(this).animate({ backgroundColor: '#30A8F4' }, { speed: 1000, queue: false });
    }, function () {
        $(this).animate({ backgroundColor: '#C35A33' }, { speed: 1000, queue: false });
    });

    $("#btn_begin").hover(function () {
        $(this).animate({ backgroundColor: '#30A8F4' }, { speed: 1000, queue: false });
    }, function () {
        $(this).animate({ backgroundColor: '#C35A33' }, { speed: 1000, queue: false });
    });
    
    $(".set_submit").hover(function () {
        $(this).animate({ backgroundColor: '#30A8F4' }, { speed: 1000, queue: false });
    }, function () {
        $(this).animate({ backgroundColor: '#771347' }, { speed: 1000, queue: false });
    });
    //////////////////////////////////////////////////////////////////////////
    $(".add_opt").bind('click', func_add_opt);
    $(".remove_opt").bind('click', func_rm_opt);
    //////////////////////////////////////////////////////////////////////////
    $(".fold").bind('click', func_fold);
    //////////////////////////////////////////////////////////////////////////
    $(".add").bind('click', func_add);
    $(".minus").bind('click', func_rm);

    var ipt_orignal_text;
    $(":text").css('color', 'gray');
    $(":text").bind({ 'focus': func_focus, 'blur': func_blur });
});